<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 引入bootstrap相关资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <!-- 引入该页面的css -->
    <link rel="stylesheet" href="css/login.css" />
  </head>
  <body>
    <!-- 顶部导航栏 0 -->
    <nav id="navbar" class="navbar navbar-light bg-light px-3">
      <a class="navbar-brand" href="./index.html">Blog</a>
      <ul class="nav nav-pills">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
            <i class="bi bi-list"></i>
          </a>
          <ul class="dropdown-menu">
            <!-- 如果未登录则显示下面的列表项 -->
            <li><a class="dropdown-item" href="./login.html">登录</a></li>
            <li><a class="dropdown-item" href="./register.html">注册</a></li>
            <!-- 如果已登录，则显示下面的列表项 -->
            <li><a class="dropdown-item" href="./index.html">个人主页</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="./publish.html">发表话题</a></li>
            <li><a class="dropdown-item" href="/logout">登出</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    <!-- 顶部导航栏 1 -->
    <!-- 中间表单 0 -->
    <div id="app" class="shadow-lg p-3 mb-5 bg-white rounded">
      <!-- 圆形头像 -->
      <div id="touxiang">
        <img src="https://beta.pili.com.tw/img/role/640x741/yulongyinshi_1.jpg">
      </div>
      <!-- 登录表单 0 -->
      <form action="#" id="login-form">
        <!-- 账号输入框 -->
        <div class="input-group flex-nowrap username-input" style="margin-top: 80px;">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="bi bi-person"></i></span>
          </div>
          <input type="text" class="form-control" placeholder="请输入账号" name="username">
        </div>
        <!-- 密码输入框 -->
        <div class="input-group flex-nowrap username-input">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="bi bi-lock"></i></span>
          </div>
          <input type="password" class="form-control" placeholder="请输入密码" name="password">
        </div>
        <!-- 登录按钮 -->
        <div class="input-group flex-nowrap username-input">
          <span id="tip-text">如果没有账户，请前往<a href="./register.html">注册</a></span>
          <input type="submit" value="登录" class="btn btn-primary" id="login-button" />
        </div>
      </form>
      <!-- 登录表单 1 -->
    </div>
    <!-- 中间表单 1 -->
    <!-- 提示组件 0 -->
    <div class="position-fixed bottom-0 end-0" style="z-index: 11">
      <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">提示</strong>
          <small>刚刚</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          <p id="toast-body">登录成功</p>
        </div>
      </div>
    </div>
    <!-- 提示组件 1 -->
    <script>
      // 使用toast提示组件提示消息, 通过按钮来触发提示框的显示
      document.getElementById("login-button").onclick = function() {
        var totalLiveExample = document.getElementById("liveToast");
        var toast = new bootstrap.Toast(totalLiveExample);
        toast.show();
      }
    </script>
  </body>
</html>
